<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>checkable-menu</title>
<link href="../../../css/assets/dpl/base.css" rel="stylesheet"/>
<link href="../../../button/demo/assets/custombutton.css" rel="stylesheet"/>
<link href="../assets/menubutton.css" rel="stylesheet"/>

<link href="../../../menu/demo/assets/menu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menuitem.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/submenu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/c2c-ui.css" rel="stylesheet"/>
<style>
    .ks-menu {
        background: white;
        border: 1px solid red;
    }

    li {
        padding: 5px;
        border: 1px solid white;
    }
</style>
<style>
    h1 {
        font-size: 2em;
        margin: 10px;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        margin: 10px;
        text-align: center;
    }

    #wrap {
        width: 90%;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="wrap">

    <h1 id="describe">菜单按钮演示</h1>
    <div style="height:200px;overflow: auto;border:1px solid red;">
        <h2>设计说明</h2>
        <ol>
            <li>支持键盘，鼠标互操作</li>
            <li>符合 wai-aria 规范</li>
            <li>构建组件层次</li>
        </ol>

        <h2>使用说明</h2>
        <ol>
            <li>
                tab 移动焦点到按钮：按钮周边粉框
            </li>
            <li>
                按钮获得焦点时点击上或下键，弹出菜单
                <ol>
                    <li>或点击按钮弹出菜单</li>
                </ol>
            </li>


            <li>
                菜单弹出后，上下键选择菜单项
                <ol>
                    <li>或通过鼠标掠过</li>
                </ol>
            </li>

            <li>
                带有子菜单的菜单项通过右键激活子菜单，左键收缩子菜单
                <ol>
                    <li>或通过鼠标掠过，自动弹出子菜单</li>
                </ol>
            </li>

            <li>
                菜单项弹出后，按下 enter 或 space 则选中当前高亮菜单项
                <ol>
                    <li>或通过鼠标点击选中任意菜单项</li>
                </ol>
            </li>

            <li>
                esc 隐藏下拉菜单（焦点仍然在按钮上）
                <ol>
                    <li>或通过鼠标点击文档空白区域（按钮失去焦点）</li>
                </ol>
            </li>
        </ol>
    </div>

    <h2>checked menu</h2>

    <div role='application' id="exist">
    </div>

    <script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/package.js"></script>
    <script>


            KISSY.use("menubutton,menu", function (S, MenuButton, Menu) {
                var sb = new Menu.PopupMenu();

                sb.addChild(new Menu.CheckItem({
                    content:"submenuitem1"
                }));

                sb.addChild(new Menu.CheckItem({
                    content:"submenuitem2"
                }));


                var sb2 = new Menu.PopupMenu();

                sb2.addChild(new Menu.CheckItem({
                    content:"submenuitem11"
                }));

                sb2.addChild(new Menu.CheckItem({
                    content:"submenuitem22"
                }));
                var b2 = new Menu.SubMenu({
                    content:"sub-sub-menu",

                    menu:sb2
                });

                sb.addChild(b2);

                var b = new Menu.SubMenu({
                    content:"submenu",

                    menu:sb
                });

                var menu = new Menu.PopupMenu({

                    children:[
                        b,
                        new Menu.CheckItem({
                            content:"alone"
                        })
                    ]
                });

                var exist = new MenuButton({
                    render:"#exist",
                    content:"多选菜单",
                    width:200,
                    listeners: {
                        click: function (e) {
                            S.log(e.target.get('content'));
                        }
                    },
                    menu:menu
                });
                exist.render();
            });

    </script>
</div>
</body>
</html>